<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <title>编辑我的资料</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1" name="viewport" />
    <link href="css/mui.min.css" rel="stylesheet" type="text/css" />
    <link href="css/mui.picker.css" rel="stylesheet" type="text/css" />
    <link href="css/mui.dtpicker.css" rel="stylesheet" type="text/css" />
    <link href="css/base.css" rel="stylesheet" type="text/css" />
    <link href="css/button.css" rel="stylesheet" type="text/css" />
    <link href="css/icon.css" rel="stylesheet" type="text/css" />
    <link href="css/person-edit.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="header-bar">
        <h4>基本资料</h4>
        <div class="title-tip"></div>
    </div>
    <div class="form-body">
        <div class="form-item">
            <span class="item-title">头像</span>
            <a class="item-action" href="javascript:;">
                <span class="action-value">
                  <div class="avatar-container">
                      <img src="" class="avatar-thumb" />
                      <div class="avatar-mask"></div>
                  </div>
                </span>
                <i class="icon icon-down"></i>
            </a>
        </div>
        <div class="form-item">
            <span class="item-title">昵称</span>
            <a class="item-action" href="javascript:;">
                <span id="nickname" class="action-value"></span>
                <i class="icon icon-cross"></i>
            </a>
        </div>
        <div class="form-item">
            <span class="item-title">性别</span>
            <a class="item-action" href="javascript:;">
                <span id="sex" class="action-value">
                  <span></span>
                <i class="icon icon-male"></i>
                </span>
                <i class="icon icon-down"></i>
            </a>
        </div>
        <div class="form-item">
            <span class="item-title">手机号（已绑定）</span>
            <a class="item-action" href="javascript:;">
                <span id="mobile" class="action-value"></span>
                <i class="icon icon-lock"></i>
            </a>
        </div>
        <div class="form-item last">
            <span class="item-title">二维码</span>
            <a class="item-action qrcode" href="javascript:;">
                <span class="action-value">
                  <img src="image/qr.png" width="20px" />
                </span>
                <i class="icon icon-down"></i>
            </a>
        </div>
    </div>
    <div class="header-bar">
        <h4>个人信息</h4>
        <div class="title-tip"></div>
    </div>
    <div class="form-body">
        <div class="form-item">
            <span class="item-title">生日</span>
            <a class="item-action birthday" href="javascript:;">
                <span class="action-value">告诉小家有惊喜</span>
                <i class="icon icon-down"></i>
            </a>
        </div>
        <div class="form-item">
            <span class="item-title">星座</span>
            <a class="item-action constellations" href="javascript:;">
                <span class="action-value"></span>
                <i class="icon icon-down"></i>
            </a>
        </div>
        <div class="form-item">
            <span class="item-title">来自</span>
            <span class="item-action">
                  <input name="hometown" class="control-text" placeholder="老乡见老乡 两眼泪汪汪" />
            </span>
        </div>
        <div class="form-item">
            <span class="item-title">职业</span>
            <a class="item-action jb" href="javascript:;">
                <span id="job" class="action-value">未登记</span>
                <input type="hidden" name="job" value="" />
                <i class="icon icon-down"></i>
            </a>
        </div>
        <div class="form-item">
            <span class="item-title">公司</span>
            <span class="item-action">
                  <input name="company" class="control-text" placeholder="看看有没有同事一起的" />
            </span>
        </div>
        <div class="form-item">
            <span class="item-title">感情状态</span>
            <a class="item-action fl" href="javascript:;">
                <span class="action-value">未登记</span>
                <input type="hidden" name="feeling" value="" />
                <i class="icon icon-down"></i>
            </a>
        </div>
        <div class="form-item last">
            <span class="item-title">个性签名</span>
            <span class="item-action">
                  <input name="autograph" class="control-text" placeholder="一句话认识你" />
            </span>
        </div>
    </div>
    <div class="header-bar">
        <h4>我的标签</h4>
        <div class="title-tip"></div>
    </div>
    <div class="my-label">
        <div class="label-title">听说75%的人因为小家交到了“朋友”......世界那么大，赶紧交朋友！（最多五个选项）</div>
        <div class="label-container">
            <div class="label-item">
                <label class="red">&nbsp;</label>
                <p>吃喝 0</p>
            </div>
            <div class="label-item">
                <label class="blue">&nbsp;</label>
                <p>运动 0</p>
            </div>
            <div class="label-item">
                <label class="gray">&nbsp;</label>
                <p>生活 0</p>
            </div>
            <div class="label-item">
                <label class="yellow">&nbsp;</label>
                <p>个性 0</p>
            </div>
        </div>
    </div>
    <div class="label-fall-container">
        <div id="label-dom" class="label-fall">

        </div>
    </div>
    <script id="label" type="text/html">
        {{each bianqian}}
        <label data-id="{{ $value.id }}" class="{{ $index | color}}">{{ $value.name }}</label> {{/each}}
    </script>
    <button class="btn btn-submit sbm yellow">保存资料</button>
    <script src="js/jquery.min.js" type="text/javascript"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript"></script>
    <script src="js/template.js" type="text/javascript"></script>
    <script src="js/mui.min.js" type="text/javascript"></script>
    <script src="js/mui.picker.js" type="text/javascript"></script>
    <script src="js/mui.dtpicker.js" type="text/javascript"></script>
    <script src="js/dialog.js" type="text/javascript"></script>
    <script src="js/base.js" type="text/javascript"></script>
    <script type="text/javascript">
        var year = [];
        var month = [];
        var day = [];
        var date = (new Date()).getFullYear();
        for (var i = 1900; i <= date; i++) {
            year.push({
                value: i,
                text: i + '年'
            });
        }

        for (var i = 1; i <= 12; i++) {
            month.push({
                value: i,
                text: i + '月'
            });
        }

        for (var i = 1; i <= 31; i++) {
            day.push({
                value: i,
                text: i + '日'
            });
        }

        var dtpicker = new mui.DtPicker({
            type: "date",
            title: '我不会告诉你生日有惊喜',
            bottom: true,
            beginDate: new Date(1900, 01, 01),
            endDate: new Date(date, 12, 31),
            customData: {
                y: year,
                m: month,
                d: day
            }
        });
        $(function() {
            bee.wxConfig(function() {
                bee.hideAllNonBaseMenuItem();
            }, function(res) {});

            bee.request({
                url: '/Member/Index/getInfo',
                data: null,
                success: function(data) {
                    bee.template('label', data, true);
                    bee.template('feeling', data, true);
                    $('[name="feeling"]').siblings('.action-value').text($('.dialog .dialog-body li .icon[data-id="' + bee.cache('feeling') + '"]').parent().text());
                    $('[name="feeling"]').val(bee.cache('feeling'));

                    if (bee.cache('label') !== null) {
                        var label = bee.cache('label').split(',');
                        for (var i = 0; label[i]; i++) {
                            $('#label-dom label[data-id="' + label[i] + '"]').addClass('active');
                        }
                    }

                    $('body').on('click', '#label-dom label', function() {
                        $(this).toggleClass('active');
                    });
                }
            });

            $('#nickname').text(bee.cache('name'));
            $('#mobile').text(bee.cache('mobile'));
            $('[name="company"]').val(bee.cache('company'));
            $('[name="autograph"]').val(bee.cache('autograph'));
            $('[name="hometown"]').val(bee.cache('hometown'));
            $('.birthday ').find('.action-value').text(bee.cache('birthday'));
            $('.constellations').find('.action-value').text(bee.cache('constellations'));
            $('#job').text(bee.cache('job'));
            $('[name="job"]').val(bee.cache('job_id'));
            if (bee.cache('sex') === '1') {
                $('#sex span').text('男神');
                $('#sex .icon').removeClass('icon-female').addClass('icon-male');
            } else {
                $('#sex span').text('女神');
                $('#sex .icon').removeClass('icon-male').addClass('icon-female');
            }

            $('.avatar-thumb').attr('src', bee.cache('avatar'));

            $('.label-fall').each(function(index, dom) {
                $(this).css('margin-left', (index * 2 + 10) + '%');
            });

            $('body').on('click', '.close', function() {
                $('.dialog').dialog('hide');
            });

            $('body').on('click', '.fd .ok', function() {
                var text = $('.fd .icon-dot').parent().text();
                var id = $('.fd .icon-dot').attr('data-id');
                $('[name="feeling"]').siblings('.action-value').text(text);
                $('[name="feeling"]').val(id);
                $('.dialog').dialog('hide');
            });

            $('body').on('click', '.cd .ok', function() {
                var text = $('.cd .icon-dot').parent().text();
                $('.constellations .action-value').text(text);
                $('.dialog').dialog('hide');
            });

            $('body').on('click', '.fl', function() {
                $('.fd').dialog('show');
            });

            $('body').on('click', '.constellations', function() {
                $('.cd').dialog('show');
            });

            $('body').on('click', '.birthday', function() {
                var $this = $(this);
                dtpicker.show(function(e) {
                    $this.find('.action-value').text(e.value);
                })
            });

            $('body').on('click', '.dialog .icon', function() {
                $('.dialog .icon').removeClass('icon-dot').addClass('icon-dot-blank');
                $(this).removeClass('icon-dot-blank').addClass('icon-dot');
            });

            $('body').on('click', '.jb', function() {
                bee.cache('hometown', $('[name="hometown"]').val());
                bee.cache('birthday', $('.birthday ').find('.action-value').text());
                bee.cache('constellations', $('.constellations').find('.action-value').text());
                bee.cache('company', $('[name="company"]').val());
                bee.cache('autograph', $('[name="autograph"]').val());

                bee.putHis(document.URL);
                bee.open('job.html');
            });

            $('body').on('click', '.qrcode', function() {
                bee.request({
                    url: '/Member/Index/getEwm',
                    data: null,
                    success: function(data) {
                        $('.lq img').attr('src', data.url);
                        $('body').addClass('mui-dtpicker-active-for-page');
                        $('.lq').show();
                    }
                });
            });

            $('body').on('click', '.lq', function() {
                $('body').removeClass('mui-dtpicker-active-for-page');
                $(this).hide();
            });

            $('body').on('click', '.sbm', function() {
                var data = {};
                data.birthday = $('.birthday').find('.action-value').text();
                data.constellations = $('.constellations').find('.action-value').text();
                data.come_form = $('[name="hometown"]').val();
                data.occupation = $('[name="job"]').val();
                data.company = $('[name="company"]').val();
                data.autograph = $('[name="autograph"]').val();
                data.feeling = $('[name="feeling"]').val();
                data.label = [];
                $('#label-dom label.active').each(function() {
                    data.label.push($(this).attr('data-id'));
                });
                data.label = data.label.join(',');
                bee.request({
                    url: '/Member/Index/update_info',
                    data: data,
                    success: function(rs) {
                        bee.open('person.html');
                    }
                });
            });
        });
    </script>
    <div class="dialog cd">
        <div class="dialog-title">透露一下你的星座呗</div>
        <div class="dialog-body">
            <ul>
                <li><i class="icon icon-dot"></i> 水平座</li>
                <li><i class="icon icon-dot-blank"></i> 双鱼座</li>
                <li><i class="icon icon-dot-blank"></i> 白羊座</li>
                <li><i class="icon icon-dot-blank"></i> 金牛座</li>
                <li><i class="icon icon-dot-blank"></i> 双子座</li>
                <li><i class="icon icon-dot-blank"></i> 巨蟹座</li>
                <li><i class="icon icon-dot-blank"></i> 狮子座</li>
                <li><i class="icon icon-dot-blank"></i> 处女座</li>
                <li><i class="icon icon-dot-blank"></i> 天秤座</li>
                <li><i class="icon icon-dot-blank"></i> 天蝎座</li>
                <li><i class="icon icon-dot-blank"></i> 射手座</li>
                <li><i class="icon icon-dot-blank"></i> 魔羯座</li>
            </ul>
        </div>
        <div class="dialog-foot">
            <a href="javascript:;" class="font-red ok">确认</a>
            <a href="javascript:;" class="font-blue close" style="margin-left: 40%;">关闭</a>
        </div>
    </div>
    <div class="dialog fd">
        <div class="dialog-title">感情这事儿吧...</div>
        <div class="dialog-body">
            <ul id="feeling-dom">
            </ul>
            <script id="feeling" type="text/html">
                {{each f_list}}
                <li><i data-id="{{ $value.id }}" class="icon {{ $index === 0 ? 'icon-dot' : 'icon-dot-blank' }}"></i> {{ $value.name }}</li>
                {{/each}}
            </script>
        </div>
        <div class="dialog-foot">
            <a href="javascript:;" class="font-red ok">确认</a>
            <a href="javascript:;" class="font-blue close" style="margin-left: 40%;">关闭</a>
        </div>
    </div>
    <div class="layer-qrcode lq">
        <img src="">
    </div>
</body>

</html>
